<template>
	<view>
		<uni-nav-bar fixed="true" title="修改邮箱" backgroundColor="#f5f5f5" height="120rpx" @clickLeft="back"
			statusBar="true">
			<view slot="left">
				<uni-icons type="back" size="30"></uni-icons>
			</view>
		</uni-nav-bar>
		<view class="body">
			<view class="title">请输入密码修改邮箱</view>
			<view class="card">
				<input type="text" v-model="email" placeholder="请输入新的邮箱..." placeholder-class="text" />
			</view>
			<view class="card">
				<input type="password" v-model="password" placeholder="请输入密码..." placeholder-class="text" />
			</view>
			<view class="btn" @click="update">
				修改邮箱
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				password: "",
				email: ""
			}
		},
		methods: {
			update() {
				if (this.email === "") {
					uni.showToast({
						icon: "none",
						title: "请输入邮箱!"
					});
					return;
				}
				if (!this.isEmail(this.email)) {
					uni.showToast({
						icon: "none",
						title: "邮箱格式错误!"
					});
					return;
				}
				if (this.password === "") {
					uni.showToast({
						icon: "none",
						title: "请输入密码!"
					});
					return;
				}
				this.$request.TokenRequest({
					url: "/user/updateEmail"
				}, {
					password: this.password,
					email: this.email
				}).then(res => {
					if (res.state === 200) {
						uni.showToast({
							icon: "success",
							title: "修改邮箱成功!"
						})
						this.password = ""
						this.email = ""
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			back() {
				uni.navigateBack({})
			},
			isEmail(str) {
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				return reg.test(str);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 73%;
		margin: 0 auto;
		text-align: center;
	}

	.title {
		margin: 30rpx 0;
		font-size: 40rpx;
	}

	.card {
		background-color: #F5F5F5;
		margin: 70rpx auto;
		padding: 40rpx 55rpx;
		border-radius: 50rpx;

		// width: 70%;
		.text {
			font-size: 35rpx;
		}
	}

	.btn {
		font-size: 37rpx;
		color: #FFFFFF;
		background-color: #007AFF;
		width: 360rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		padding: 15rpx;
		border-radius: 40rpx;
		margin: 100rpx auto;
	}
</style>
